<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>发布</title>
    <script src="/static/js/jquery-1.11.3.min.js"></script>
    <script src="/static/js/layui.js"></script>
    <link rel="stylesheet" href="/static/css/bootstrap.min.css">
    <link rel="stylesheet" href="/static/css/normalize.css">
    <link rel="stylesheet" href="/static/css/layui.css">
    <link rel="stylesheet" href="/static/css/layui.mobile.css">
    <style>
      @font-face {font-family: "iconfont";
        src: url('/static/css/iconfont.eot?t=1490147664686'); /* IE9*/
        src: url('/static/css/iconfont.eot?t=1490147664686#iefix') format('embedded-opentype'), /* IE6-IE8 */
        url('/static/css/iconfont.woff?t=1490147664686') format('woff'), /* chrome, firefox */
        url('/static/css/iconfont.ttf?t=1490147664686') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
        url('/static/css/iconfont.svg?t=1490147664686#iconfont') format('svg'); /* iOS 4.1- */
      }

        .iconfont {
        font-family:"iconfont" !important;
        font-size:16px;
        font-style:normal;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        }
        #containter{width:100%;margin:0 auto;min-width:300px;max-width:420px;}
        #nav{width:100%;float:left;}
        #nav>ul>li{width:50%;}

        /*footer*/
        #foot{width:100%;min-width:300px;max-width:420px;position:fixed;margin:0 auto;bottom:0;height:50px;border-top:1px solid #d0d0d0;background:#fff;}
        #foot>ul{padding:0;display:block;}
        #foot>ul>li{display:block;float:left;width:32%;margin-left:1%;}
        #foot>ul>li>a{display:block;width:100%;}
        .foot_nav{width:42px;height:46px;margin:0 auto;}
        .foot_nav>i{font-size:20px;display:block;width:24px;margin:0 auto;}
        .foot_nav>span{font-size:18px;}
        .foot_nav_select{color:rgb(212,56,42);}
        /*body_list*/
        .fabu_list{width:100%;float:left;background:rgb(246,248,249);}
        .fabu_list>ul{padding:0;display:block;width:100%;float:left;}
        .fabu_list>ul>li{display:block;width:100%;border-bottom:1px solid #ccc;float:left;padding:0 10px 10px 10px;margin:0 0 5px 0;background:#fff;}
        .fabu_list>ul>li>a{display:block;width:100%;}
        .fabu_list_title>span{font-size:16px;}
        .list_title>span:nth-child(1){color:rgb(212,56,42);font-weight:800;}
        .list_bottom{width:100%;height:20px;margin:0 auto;margin-bottom:5px;}
        .list_read{float:right;color:#ccc;/*margin:20px 0 0 0;*/}
    </style>
</head>
<body>
    <section id="containter">

        <div class="fabu_list">
            <ul>
            {foreach $data as $vo}
              <li>
                <a href="{:url("detail")}/id/{$vo.id}.html">
                  <div class="list_title">
                    <span>标题：</span>
                    <span>{$vo.title}</span>
                  </div>
                  <div class="list_bottom">
                    <span class="list_read">点击量:{$vo.browse}</span>
                  </div>
                </a>
              </li>
            {/foreach}
            </ul>
        </div>

        <!-- footer -->
        <footer id="foot">
            <ul>
                <li>
                  <a href="{:url('index')}">
                    <div class="foot_nav"><i class="iconfont ">&#xe60c;</i><span >首页</span></div>
                  </a>
                </li>
                <li>
                  <a href="{:url('hot')}">
                    <div class="foot_nav"><i class="iconfont foot_nav_select">&#xe619;</i><span class="foot_nav_select">热门</span></div>
                  </a>
                </li>
                <li>
                  <a href="{:url('edit')}">
                    <div class="foot_nav"><i class="iconfont">&#xe6aa;</i><span>发布</span></div>
                  </a>
                </li>
          </ul>
        </footer>
    </section>
</body>
<script>
    $(".body").height(window.screen.height);

    layui.use('element', function(){
      var $ = layui.jquery
      ,element = layui.element(); //Tab的切换功能，切换事件监听等，需要依赖element模块
      //Hash地址的定位
      var layid = location.hash.replace(/^#test=/, '');
      element.tabChange('test', layid);

      element.on('tab(test)', function(elem){
        location.hash = 'test='+ $(this).attr('lay-id');
      });

    });

</script>
</html>